<?php
$auction_id_str = 'auction_'.$auction['id'];
?>
<script src="<?=PATH_URL?>static/js/fancywebsocket.js"></script>
<script>
/*Begin: Countdown timer*/
function show_countdown(auction_id,until_time){
	var timer_countdown_selector = '#'+auction_id+' .timer_countdown';
	// Convert MySql DateTime stamp into JavaScript's Date format
	var t = until_time.split(/[- :]/);
	var liftoffTime = new Date(t[0], t[1]-1, t[2], t[3], t[4], t[5]);
	$(timer_countdown_selector).countdown({until: liftoffTime, format: 'HMS', significant : 3, layout: '{hn} {hl} {mn} {ml} {sn} {sl}', onExpiry: timer_onExpiry});
}
function timer_onExpiry(){
	var timer_countdown_jele = $(this);
	var auction_id = timer_countdown_jele.attr('id');
	if(auction_id){
		setTimeout(function(){
			timer_onExpiry_inner(timer_countdown_jele,auction_id);
		},5000);
		
	}
}
function timer_onExpiry_inner(timer_countdown_jele,auction_id){
	$.post('<?=PATH_URL?>auction/result',{'auction_id':auction_id},function(data){
		var parent = timer_countdown_jele.parent();
		if(parent.hasClass('timer_countdown_container')){
			parent.addClass('timer_result_container')
		}
		try {
			var return_data = $.parseJSON(data);
			timer_countdown_jele.html(return_data.html);
		}catch(ex){}
	});
}
/*End: Countdown timer*/

/*Begin: Websocket*/
var Server;
function websocket_log( text ) {
	// console.log(text);
}

function websocket_send( text ) {
	Server.send( 'message', text );
}
function websocket_init(){
	Server = new FancyWebSocket('ws://<?=$_SERVER['HTTP_HOST']?>:9300/websocket_server.php');
	
	//Let the user know we're connected
	Server.bind('open', function() {
		websocket_log( "Connected." );
		
		
		// First call of Websocket
		websocket_connect();
	});

	//OH NOES! Disconnection occurred.
	Server.bind('close', function( data ) {
		websocket_log( "Disconnected." );
	});

	//Log any messages sent from server
	Server.bind('message', function( payload ) {
		websocket_log( payload );
		try{
			var return_data = $.parseJSON(payload);
			if(return_data && return_data.winner_price_vn){
				$('#<?=$auction_id_str?> .monetary_unit').show();
				var winner_price_html = '<span style="font-size:14px;">'+return_data.user_email+'</span><br/>';
					winner_price_html += '<span style="font-size:26px;">'+return_data.winner_price_vn+'</span>';
				$('#<?=$auction_id_str?> .CurrentPrice').html(winner_price_html);
			}
		}catch(err){}
	});

	Server.connect();
}
/*End: Websocket*/

function websocket_connect(){
	$('#bid_value').val('');
	$('#bid_value').focus();
	websocket_send('<?=PATH_URL."auction/stop_auction/{$auction['id']}/temporary_update"?>');
}
$(document).ready(function(){
	$('#bid_value_form').submit(function(){
		$(this).ajaxSubmit({
			success: function(data){
				if(data=='success'){
					websocket_connect();
				} else {
					alert(data);
				}
			}
		});
		// websocket_send($('#bid_value').val());
		return false;
	});
	
	websocket_init();
});
</script>
<div id="contentCol">
	<div id="AuctionBlockBigSize">
		<div class="AuctionBlockContainer" id="BigAuctionBlock">
			<div id="<?=$auction_id_str?>" class="auction auctionBigBlock Auction Auction_status_INPLAY">
				<div class="auctionDetailsContainer">
					<div class="productPictureContainer">
						<a href="<?=get_detail_url_for_auction($auction)?>" class="Zoom">
							<img src="<?=get_image_url_for_auction($auction,'large')?>" class="productPicture"/>
						</a>
					</div>
					<h1 class="productName"><a href="<?=get_detail_url_for_auction($auction)?>"><?=$auction['title']?></a></h1>
					<div class="auctionDetails">
						<div class="auctionInfos" style='height:160px;'>
							<div class="productPriceContainer">
								<div class="productPrice ifNotNOBIDDER ifNotDEALAUCTION"><span class="CurrentPrice" style='font-size:16px;'></span> <span class='monetary_unit' style='display:none;'><?=MONETARY_UNIT?></span></div>
								<div class="productValue ifNotDEALAUCTION">Giá : <strong><?=get_price_for_auction($auction)?> <?=MONETARY_UNIT?></strong></div>
							</div>
							<div class="productTimerContainer">
								<div class="timer Timer if ifINPLAY ifIMMINENT ifNotCHECKING ifNotSUSPENDED ifNotTERMINATED ifNotPAID ifNotREFUNDED ifNotCANCELED timer_countdown_container" style="">
									<div class='timer_countdown' id='<?=$auction['id']?>'></div>
									<script>
										show_countdown('<?=$auction_id_str?>','<?=$auction['end_time']?>');
									</script>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div style='clear:left;'></div>

<?php
if(!empty($auction['description'])){
?>
<div class='description_container'>
	<?=$auction['description']?>
</div>
<?php
}
?>

<div class='detail_page'>
	<?php
	if(!empty($_SESSION['user'])){
	?>
	<div class='bid_value_form_container'>
		<form id="bid_value_form" action='<?=PATH_URL?>auction/submit' method='POST'>
			<div style='float:left;width:100%;'>
				<label style='width:140px;'>Giá đấu (1 lần tốn 1 xu):</label>
				<input name='bid_value' id='bid_value' type='text' value='' />
				<label>&nbsp;1000 <?=MONETARY_UNIT?></label>
			</div>
			<div style='float:left;width:100%;padding-left:140px;padding-top:10px;'>
				<input type='submit' value='Submit' />
			</div>
			<input name='auction_id' type='hidden' value='<?=$auction['id']?>' />
		</form>
	</div>
	<?php
	}
	?>
</div>